<template>
	<view class="bind-page">
		<view class="bind-box">
			请输入姓名及学员号
		</view>
		<view class="student-name-box">
			<input type="text" placeholder="请输入学员姓名" v-model="studentName" @input="nameChange($event)" maxlength="50">
			<view class="student-name-tips" v-if="nameTips">仅限输入中文、英文、数字及空格，最大长度为50个字</view>
		</view>

		<view class="student-code-box">
			<input type="text" placeholder="请输入学员编号" v-model="studentCode" @input="studentCodeChange($event)" maxlength="30">
			<view class="student-code-tips" v-if="codeTips">仅限输入英文、数字，最大长度为30个字</view>
		</view>
		<view class="add-btn-box" @click="addStudentCode">
			添加
		</view>
	</view>
</template>
<script>
	import { apiBindStudntCode } from '@/api/user/user.js'
	export default {
		data() {
			return {
				studentCode:"",
				studentName:"",
				nameTips:false,
				codeTips:false
			}
		},
		onLoad(){
			this.studentCode = "";
			this.studentName = "";
		},
		methods: {
			nameChange(e){
				let reg = new RegExp('^[ \u4e00-\u9fa5_a-zA-Z0-9]{1,50}$');
				if (!reg.test(e.target.value) && e.target.value) {
					this.nameTips = true;
				} else {
					this.nameTips = false;
				}
			},
			studentCodeChange(e){
				let reg = new RegExp('^[ a-zA-Z0-9]{1,30}$');
				if (!reg.test(e.target.value) && e.target.value) {
					this.codeTips = true;
				} else {
					this.codeTips = false;
				}
			},
			addStudentCode(){
				if(!this.nameTips && !this.codeTips && !this.studentCode.trim() && !this.studentName.trim()){
					return
				}
				if(this.studentCode.trim() == "" || this.studentName.trim() == ""){
					return
				}
				let queryData =[{
					studentCode:this.studentCode,
					studentName:this.studentName
				}]
				this.$tip.loading();
				apiBindStudntCode(queryData).then((res)=>{
					if(+res.code == 200){
						this.$tip.loaded();
						uni.showToast({
							title: " 绑定成功 ",
							icon: "none",
							duration:2000,
						})
						setTimeout(()=>{
							uni.navigateTo({
								url: "/pages/bindStudentCode/studentList"
							});
						},2000)
					}
					if(+res.code == 500){
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration:2000,
						})
					}
				}).catch((res)=>{
					this.$tip.loaded();
					uni.showToast({
						title: res.msg,
						icon: "none",
						duration:2000,
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bind-page{
		padding:0rpx 54rpx;
		box-sizing: border-box;
		.bind-box{
			width:100%;
			height: 299rpx;
			line-height: 299rpx;
			color:#333;
			font-size: 42rpx;
			font-weight:600;
		}
		.student-name-box{
			width: 100%;
			margin-bottom:50rpx;
			input{
				width: 100%;
				padding-left:28rpx;
				box-sizing: border-box;
				background: #F5F5F5;
				border-radius: 20rpx;
				height: 96rpx;
				font-size: 28rpx;
			}
			.student-name-tips{
				color:red;
				font-size:24rpx;
				margin-top:5rpx;
				padding-left:28rpx;
			}
		}
		.student-code-box{
			width: 100%;
			margin-bottom:70rpx;
			input{
				width: 100%;
				padding-left:28rpx;
				box-sizing: border-box;
				background: #F5F5F5;
				border-radius: 20rpx;
				height: 96rpx;
				font-size: 28rpx;
			}
			.student-code-tips{
				color:red;
				font-size:24rpx;
				margin-top:5rpx;
				padding-left:28rpx;
			}
		}
		.add-btn-box{
			width: 100%;
			height: 82rpx;
			line-height: 82rpx;
			background: #397EF5;
			border-radius: 41rpx;
			font-size: 28rpx;
			color:#fff;
			text-align: center;
		}
	}
	
	

</style>
